<template>
  <el-card class="box-card">
    <el-row :gutter="20">

      <!--下拉菜单-->
      <el-col :span="2">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            全部时间<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">全部时间</el-dropdown-item>
            <el-dropdown-item command="b">最近一天</el-dropdown-item>
            <el-dropdown-item command="c">最近一周</el-dropdown-item>
            <el-dropdown-item command="d">最近一月</el-dropdown-item>
            <el-dropdown-item command="e">最近三月</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>

      <!--下拉菜单-->
      <el-col :span="2">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            操作类型<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">操作类型</el-dropdown-item>
            <el-dropdown-item command="b">新增</el-dropdown-item>
            <el-dropdown-item command="c">修改</el-dropdown-item>
            <el-dropdown-item command="d">删除</el-dropdown-item>
            <el-dropdown-item command="e">导出</el-dropdown-item>
            <el-dropdown-item command="e">导入</el-dropdown-item>
            <el-dropdown-item command="e">下载</el-dropdown-item>
            <el-dropdown-item command="e">打印</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>

      <!--搜索框-->
      <el-col :span="4">
        <el-input placeholder="请输入员工名/编码"  class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>

      <!--导出按钮-->
      <el-col :span="6" :offset="10" style="text-align: right">
        <el-button type="primary" >导出</el-button>
      </el-col>

    </el-row>

    <el-row>
      <el-col :span="24">
        <el-table :data="tableData" stripe style="width: 100%" :cell-style="{ textAlign: 'center' }">
          <el-table-column prop="serialNumber" label="序号"  header-align="center"></el-table-column>
          <el-table-column prop="userNumber" label="登录工号" header-align="center"></el-table-column>
          <el-table-column prop="userName" label="姓名" header-align="center"></el-table-column>
          <el-table-column prop="operationTime" label="操作时间" header-align="center"></el-table-column>
          <el-table-column prop="operationModule" label="操作模块" header-align="center"></el-table-column>
          <el-table-column prop="operationType" label="操作类型" header-align="center"></el-table-column>
          <el-table-column prop="desc" label="详情" header-align="center"></el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!--分页-->
    <el-row>
      <el-col :span="24">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
      </el-col>
    </el-row>

  </el-card>

</template>

<script>
  export default {
    name: "LoginLog",
    data(){
      return{
        tableData:[{
          id: 0,
          serialNumber: "2",
          userNumber: "",
          userName: "",
          operationTime: "",
          operationModule: "",
          operationType: "",
          desc: "",
        }],
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4
      }
    },
    methods:{

      handleCommand(command) {
        this.$message('click on item ' + command);
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },

  }
</script>

<style scoped>

</style>
